<template>
  <div style="width: 100%; height: 100%">
    <el-radio-group v-model="radio" style="padding: 10px">
      <el-radio label="week">周</el-radio>
      <el-radio label="month">月</el-radio>
      <el-radio label="quarter">季</el-radio>
      <el-radio label="year">年</el-radio>
    </el-radio-group>
    <div class="dashboard" style="width: 100%; height: 400px">
      <Gant
        ref="Gant"
        :data="data"
        :column-data="columnData"
        :task-class="taskClass"
        :gant-config="gantConfig"
        :task-label="taskLabel"
      />
    </div>
  </div>
</template>

<script>
import Gant from "./Gant.vue";
export default {
  name: "Dashboard",
  components: {
    Gant
  },
  data() {
    return {
      radio: "week",
      columnData: [
        {
          name: "text",
          label: "任务名称",
          tree: true,
          width: "*",
          align: "left",
          resize: true,
          template: function (obj) {
            return obj.text + "自定义";
          }
        },
        {
          name: "start_date",
          label: "开始时间",
          width: "*",
          align: "center",
          template: function (obj) {
            return obj.start_date;
          }
        }
      ],
      data: [
        {
          id: 1,
          text: "Project #2",
          start_date: "2018-01-04",
          progress1: 0.3,
          progress2: 0.5,
          progress3: 0.8,
          duration: 18,
          open: true
        },
        {
          id: 2,
          text: "Task #1",
          start_date: "2018-02-04",
          duration: 8,
          progress1: 0.6,
          progress2: 0.1,
          progress3: 0.8,
          parent: 1
        },
        {
          id: 3,
          text: "Task #2",
          start_date: "2018-11-04",
          duration: 8,
          progress1: 0.9,
          progress2: 0.4,
          progress3: 0.2,
          parent: 1
        }
      ],
      gantt: null,
      gantConfig: {
        scale_height: 90,
        show_progress: false
      }
    };
  },
  watch: {
    radio(nVal) {
      this.$refs.Gant.setDateUpdate(nVal);
    }
  },
  mounted() {
    this.gantt = this.$refs.Gant.getGant();
    this.$refs.Gant.setDateUpdate(this.radio);
    this.gantt.templates.timeline_cell_class = (item, date) => {
      if (date.getDay() === 0 || date.getDay() === 6) {
        return "weekend";
      }
      return "";
    };
  },
  methods: {
    taskClass(start, end, task) {
      const children = this.gantt.getChildren(task.id);
      return children.length > 0 ? "parent_row_class" : "child_row_class";
    },
    percenToString(num) {
      return Math.floor(num * 100) + "%";
    },

    renderLabel(progress, sum) {
      var relWidth = (progress / sum) * 100;
      var cssClass = "custom_progress ";
      if (progress > 0.6) {
        cssClass += "nearly_done";
      } else if (progress > 0.3) {
        cssClass += "in_progress";
      } else {
        cssClass += "idle";
      }
      return (
        "<div class='" +
        cssClass +
        "' style='width:" +
        relWidth +
        "%'>" +
        this.percenToString(progress) +
        "</div>"
      );
    },
    taskLabel(start, end, task) {
      var summ = task.progress1 + task.progress2 + task.progress3;
      return (
        this.renderLabel(task.progress1, summ) +
        this.renderLabel(task.progress2, summ) +
        this.renderLabel(task.progress3, summ)
      );
    }
  }
};
</script>

<style lang="scss">
.weekend {
  background-color: #ddd;
}
.custom_progress {
  display: inline-block;
  vertical-align: top;
  text-align: center;
  height: 100%;
}

.custom_progress.nearly_done {
  background-color: #4cc259;
}

.custom_progress.in_progress {
  background-color: #88bff5;
}

.custom_progress.idle {
  background-color: #d96c49;
}
</style>
